#API

チャートごとに、共有チャートタイプに役立つ一連のグローバルプロトタイプメソッドがあります。これらは Chart.js で作成されたすべてのグラフで利用できますが、例として、作成した折れ線グラフを使用してみましょう。

// For example:
const myLineChart = new Chart(ctx, config);

#。破壊（）

これを使用して、作成されたチャートインスタンスを破棄します。これにより、Chart.js 内のチャートオブジェクトに保存されている参照と、Chart.js によってアタッチされた関連イベントリスナーがクリーンアップされます。これは、キャンバスが新しいグラフに再利用される前に呼び出す必要があります。

// Destroys a specific chart instance
myLineChart.destroy();

#.update(モード?)

チャートの更新をトリガーします。これは、データオブジェクトの更新後に安全に呼び出すことができます。これにより、すべてのスケールと凡例が更新され、グラフが再レンダリングされます。

myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.

あmode文字列を指定して、移行構成を使用する必要があることを示すことができます。コアは、次のいずれかを使用してこのメソッドを呼び出します。'active'、'hide'、'reset'、'resize'、'show'またundefined。'none'は、単一更新のアニメーションをスキップするためにサポートされているモードでもあります。参照してくださいアニメーション詳細についてはドキュメントを参照してください。

例：

myChart.update('active');

見るチャートの更新詳細については。

#.reset()

チャートを最初のアニメーション前の状態にリセットします。新しいアニメーションは、次を使用してトリガーできます。update。

myLineChart.reset();

#。与える（）

すべてのチャート要素の再描画をトリガーします。これにより、新しいデータの要素は更新されないことに注意してください。使用.update()その場合。

#。ストップ（）

現在のアニメーションを停止するにはこれを使用します。これにより、現在のアニメーションフレーム中にチャートが一時停止されます。電話.render()再びアニメ化するために。

39ef1725-7e6c-4431-bf3e-efec0630c1b

#.resize(幅?, 高さ?)

これを使用して、キャンバス要素のサイズを手動で変更します。これは、キャンバスコンテナーのサイズが変更されるたびに実行されますが、キャンバスノードコンテナー要素のサイズを変更する場合は、このメソッドを手動で呼び出すことができます。

電話をかけることができます.resize()パラメーターを指定せずにチャートにそのコンテナー要素のサイズを取得させるか、明示的なディメンションを渡すことができます（たとえば、印刷）。

// Resizes & redraws to fill its container element
myLineChart.resize();
// => returns 'this' for chainability
// With an explicit size:
myLineChart.resize(width, height);

#。クリア（）

チャートキャンバスをクリアします。アニメーションフレーム間の内部で広範囲に使用されますが、役に立つかもしれません。

// Will clear the canvas that myLineChart is drawn on
myLineChart.clear();
// => returns 'this' for chainability

#.toBase64Image(タイプ?、品質?)

これにより、現在の状態のチャートの Base 64 でエンコードされた文字列が返されます。

myLineChart.toBase64Image();
// => returns png data url of the image on the canvas
myLineChart.toBase64Image('image/jpeg', 1)
// => returns a jpeg data url in the highest quality of the canvas

#.getElementsAtEventForMode(e, モード, オプション, useFinalPosition)

電話をかけるgetElementsAtEventForMode(e, mode, options, useFinalPosition)Chart インスタンスでイベントとモードを渡すと、見つかった要素が返されます。のoptionsとuseFinalPosition引数はハンドラーに渡されます。

クリックされた項目を取得するには、getElementsAtEventForModeに使える。

function clickHandler(evt) {
    const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
    if (points.length) {
        const firstPoint = points[0];
        const label = myChart.data.labels[firstPoint.index];
        const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
    }
}

#.getSortedVisibleDatasetMetas()

非表示になっていないすべてのデータセットメタの配列を、キャンバス上に描画されている順序で返します。

const visibleMetas = chart.getSortedVisibleDatasetMetas();

#.getDatasetMeta(インデックス)

現在のインデックスに一致するデータセットを検索し、そのメタデータを返します。この返されたデータには、グラフの作成に使用されるすべてのメタデータが含まれています。

のdataメタデータのプロパティには、チャートの種類に応じて、各ポイント、バーなどに関する情報が含まれます。

広範な使用例は、Chart.js テスト (新しいウィンドウが開きます)。

const meta = myChart.getDatasetMeta(0);
const x = meta.data[0].x;

#getVisibleDatasetCount

現在非表示になっていないデータセットの量を返します。

const numberOfVisibleDatasets = chart.getVisibleDatasetCount();

#setDatasetVisibility(datasetIndex, 可視性)

特定のデータセットの可視性を設定します。これを使用して、HTML でグラフの凡例を作成できます。 HTML 項目の 1 つをクリックすると、以下を呼び出すことができます。setDatasetVisibility適切なデータセットを変更します。

chart.setDatasetVisibility(1, false); // hides dataset at index 1
chart.update(); // chart now renders with dataset hidden

#toggleDataVisibility(インデックス)

すべてのデータセット内のアイテムの表示/非表示を切り替えます。この機能を有効にするには、データセットがこの機能を明示的にサポートする必要があります。内部チャートの種類から、ドーナツ/円グラフ、極エリア、棒グラフでこれを使用します。

chart.toggleDataVisibility(2); // toggles the item in all datasets, at index 2
chart.update(); // chart now renders with item hidden

#getDataVisibility(インデックス)

すべてのデータセットのデータインデックスの保存された可視性状態を返します。によって設定されましたデータの可視性の切り替え。データセットコントローラーは、このメソッドを使用して、項目を表示すべきかどうかを決定する必要があります。

const visible = chart.getDataVisibility(2);

#Hide(datasetIndex, dataIndex?)

dataIndex が指定されていない場合は、指定されたデータセットの可視性を false に設定します。チャートを更新し、データセットをアニメーション化します。'hide'モード。このアニメーションは以下で設定できます。hideアニメーションオプションを入力します。参照してくださいアニメーション詳細についてはドキュメントを参照してください。

dataIndex が指定されている場合、その要素の非表示フラグを true に設定し、グラフを更新します。

chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
chart.hide(0, 2); // hides the data element at index 2 of the first dataset.

#show(datasetIndex, dataIndex?)

dataIndex が指定されていない場合は、指定されたデータセットの可視性を true に設定します。チャートを更新し、データセットをアニメーション化します。'show'モード。このアニメーションは以下で設定できます。showアニメーションオプションを入力します。参照してくださいアニメーション詳細についてはドキュメントを参照してください。

dataIndex が指定されている場合、その要素の非表示フラグを false に設定し、グラフを更新します。

chart.show(1); // shows dataset at index 1 and does 'show' animation.
chart.show(0, 2); // shows the data element at index 2 of the first dataset.

#setActiveElements(activeElements)

グラフのアクティブな (ホバーされた) 要素を設定します。これが実際に動作する様子を確認するには、「Programmatic Events」サンプルファイルを参照してください。

28fd6049-665b-43a4-8a0d-add9637266f

#isPluginEnabled(プラグインID)

指定された ID を持つプラグインがチャートインスタンスに登録されている場合はブール値を返します。

chart.isPluginEnabled('filler');

#静的: getChart(key)

指定されたキーからチャートインスタンスを検索します。キーがstring、チャートの Canvas ノードの ID として解釈されます。キーはCanvasRenderingContext2DまたはHTMLDOMElement。これは戻りますundefinedチャートが見つからない場合。見つけるには、グラフが事前に作成されている必要があります。

const chart = Chart.getChart("canvas-id");

#静的: register(chartComponentLike)

プラグイン、軸タイプ、またはチャートタイプをすべてのチャートにグローバルに登録するために使用されます。

import { Chart, Tooltip, LinearScale, PointElement, BubbleController } from 'chart.js';
Chart.register(Tooltip, LinearScale, PointElement, BubbleController);

#静的: 登録解除(chartComponentLike)

すべてのチャートからプラグイン、軸タイプ、またはチャートタイプをグローバルに登録解除するために使用されます。

←開発者新しい軸→